<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width:100%;
				height:80px;
				position:fixed;
				top:0;
			}
			.box1{
				width:100%;height:40px;background:#f00;
			}
			.box2{
				width:100%;height:40px;background:#0f0;
			}
			.high{
				height:3000px;width:100%
			}
		</style>
		<script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<div class="high">
	<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
	</div>
	</div>
	<script type="text/javascript">
		$(document).scroll(function(){
			console.log('a')
			if($(document).scrollTop()>0){
				$('.box').stop().animate({top:-40},500)
			}else{
				console.log('b')
				$('.box').stop().animate({top:0})
				
			}
		
		})
	</script>
	</body>
</html>
